<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个性化指标管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei';
            background-color: #f5f5f5;
            overflow-x: hidden;
        }

        .container {
            min-height: 100vh;
            display: flex;
            padding: 10px;
            box-sizing: border-box;
        }

        .main-panel {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px;
            text-align: center;
            flex-shrink: 0;
        }

        .header h1 {
            margin: 0 0 10px 0;
            font-size: 28px;
            font-weight: 300;
        }

        .header p {
            margin: 0;
            opacity: 0.9;
            font-size: 16px;
        }

        .toolbar-section {
            padding: 15px 20px;
            border-bottom: 1px solid #e9ecef;
            background-color: #ffffff;
            flex-shrink: 0;
        }

        .table-section {
            flex: 1;
            padding: 10px;
            overflow: auto;
            min-height: 0;
            background-color: #ffffff;
            margin-top: 10px;
        }

        .indicator-name {
            display: inline-block;
            gap: 4px;
        }

        .chinese-name {
            font-weight: 500;
            color: #2c3e50;
        }

        .english-name {
            font-size: 12px;
            color: #606266;
            font-style: italic;
        }

        .score-range {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            font-weight: 500;
        }

        .readonly-field {
            background-color: #f5f7fa !important;
            cursor: not-allowed !important;
        }

        .readonly-field input {
            background-color: #f5f7fa !important;
            cursor: not-allowed !important;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="main-panel">
                <!-- <div class="header">
                    <h1>个性化指标管理</h1>
                    <p>管理个人KPI指标，可编辑分数区间、打分规则和备注信息</p>
                </div> -->

                <div class="toolbar-section">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <h3>指标管理</h3>
                        <div>
                            <el-button type="info" size="small" icon="el-icon-info" disabled>
                                只能编辑分数区间、打分规则和备注
                            </el-button>
                        </div>
                    </div>
                </div>

                <div class="table-section">
                    <el-table :data="displayIndicators" style="width: 100%;" border row-key="id"
                        :tree-props="{children: 'children'}">
                        <el-table-column label="名称" min-width="300">
                            <template slot-scope="scope">
                                <div class="indicator-name">
                                    <div class="chinese-name"><el-tag>{{ scope.row.chineseName }}</el-tag>{{
                                        scope.row.englishName }}</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="打分区间" min-width="120" align="center">
                            <template slot-scope="scope">
                                <div class="score-range"
                                    v-if="scope.row.scoreMin !== null && scope.row.scoreMax !== null">
                                    <span>{{ scope.row.scoreMin }}</span>~<span>{{ scope.row.scoreMax }}</span>
                                </div>
                                <span v-else style="color: #909399;">-</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="打分规则" min-width="200" show-overflow-tooltip>
                            <template slot-scope="scope">{{ scope.row.scoringRules || '-' }}</template>
                        </el-table-column>
                        <el-table-column label="排序" min-width="80" align="center">
                            <template slot-scope="scope">
                                <span>{{ scope.row.sortOrder }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" min-width="150" show-overflow-tooltip>
                            <template slot-scope="scope">{{ scope.row.remarks || '-' }}</template>
                        </el-table-column>
                        <el-table-column label="操作" min-width="80" align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="editIndicator(scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <!-- 编辑指标对话框 -->
        <el-dialog title="编辑指标" :visible.sync="indicatorFormDialogVisible" width="600px">
            <el-form :model="indicatorForm" label-width="120px" :rules="indicatorFormRules" ref="indicatorForm">
                <el-form-item label="中文名称">
                    <el-input v-model="indicatorForm.chineseName" :readonly="true" class="readonly-field"
                        placeholder="指标名称不可编辑"></el-input>
                </el-form-item>
                <el-form-item label="英文名称">
                    <el-input v-model="indicatorForm.englishName" :readonly="true" class="readonly-field"
                        placeholder="英文名称不可编辑"></el-input>
                </el-form-item>
                <el-form-item label="打分区间" prop="scoreRange">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <el-input-number v-model="indicatorForm.scoreMin" :min="0" :max="150" placeholder="最小值"
                            style="width: 150px;"></el-input-number>
                        <span>~</span>
                        <el-input-number v-model="indicatorForm.scoreMax" :min="0" :max="150" placeholder="最大值"
                            style="width: 150px;"></el-input-number>
                    </div>
                </el-form-item>
                <el-form-item label="打分规则" prop="scoringRules">
                    <el-input v-model="indicatorForm.scoringRules" type="textarea" :rows="4"
                        placeholder="请输入详细的打分规则和标准"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number v-model="indicatorForm.sortOrder" :readonly="true" class="readonly-field"
                        controls-position="right" style="width: 150px;"></el-input-number>
                    <span style="color: #909399; margin-left: 10px; font-size: 12px;">排序不可编辑</span>
                </el-form-item>
                <el-form-item label="备注" prop="remarks">
                    <el-input v-model="indicatorForm.remarks" type="textarea" :rows="3"
                        placeholder="请输入备注信息"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="indicatorFormDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitIndicatorForm">确定</el-button>
            </div>
        </el-dialog>
    </div>

    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="kpi-indicator-data.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    indicatorList: [],
                    displayIndicators: [],

                    indicatorFormDialogVisible: false,
                    indicatorForm: {
                        id: '',
                        parentId: '',
                        chineseName: '',
                        englishName: '',
                        scoreMin: null,
                        scoreMax: null,
                        scoringRules: '',
                        sortOrder: 1,
                        remarks: ''
                    },
                    indicatorFormRules: {
                        scoreRange: [{
                            validator: (rule, value, callback) => {
                                if (this.indicatorForm.scoreMin !== null && this.indicatorForm.scoreMax !== null) {
                                    if (this.indicatorForm.scoreMin >= this.indicatorForm.scoreMax) {
                                        callback(new Error('最小值必须小于最大值'));
                                    }
                                }
                                callback();
                            },
                            trigger: 'blur'
                        }],
                        scoringRules: [
                            { required: true, message: '请输入打分规则', trigger: 'blur' }
                        ],
                        remarks: [
                            { max: 500, message: '备注长度不能超过500个字符', trigger: 'blur' }
                        ]
                    }
                }
            },
            mounted() {
                this.loadIndicatorList();
                this.displayIndicators = [...this.indicatorList];
            },
            methods: {
                loadIndicatorList() {
                    this.indicatorList = IndicatorDataManager.getDefaultData();
                },

                editIndicator(indicator) {
                    this.indicatorForm = { ...indicator };
                    this.indicatorFormDialogVisible = true;
                },

                submitIndicatorForm() {
                    this.$refs.indicatorForm.validate((valid) => {
                        if (valid) {
                            const now = new Date().toISOString();
                            this.indicatorForm.updateTime = now;
                            this.updateIndicatorInList(this.indicatorForm);
                            this.displayIndicators = [...this.indicatorList];
                            this.indicatorFormDialogVisible = false;
                            this.$message.success('指标更新成功');
                        }
                    });
                },

                updateIndicatorInList(indicator) {
                    const updateInTree = (items) => {
                        for (let i = 0; i < items.length; i++) {
                            if (items[i].id === indicator.id) {
                                // 只更新允许编辑的字段
                                items[i].scoreMin = indicator.scoreMin;
                                items[i].scoreMax = indicator.scoreMax;
                                items[i].scoringRules = indicator.scoringRules;
                                items[i].remarks = indicator.remarks;
                                items[i].updateTime = indicator.updateTime;
                                return true;
                            }
                            if (items[i].children && updateInTree(items[i].children)) {
                                return true;
                            }
                        }
                        return false;
                    };
                    updateInTree(this.indicatorList);
                }
            }
        });
    </script>

</body>

</html>